<template>
	<view class="container">
		<!-- 视频列表 -->
		<view class="video-list">
			<view @click="aiVideoCardClick(item)" class="video-item" v-for="(item, index) in aiVideoList" :key="index" >
				<!-- 左侧视频封面 -->
				<image v-if="item.videoUrl" :src="item.videoUrl + '?x-oss-process=video/snapshot,t_0,f_jpg,w_512,h_512,m_fast'" mode="aspectFill" class="video-cover" />
				<image v-else :src="item.srcImgUrl" mode="aspectFill" class="video-cover" />

				<!-- 右侧内容区域 -->
				<view class="content-wrapper">
					<view class="video-desc">{{ item.text }}</view>

					<!-- 状态标签 -->
					<view class="flex justify-end">
						<u-tag :text="getStatusText(item.createStatus)" :type="getStatusType(item.createStatus)" size="mini" plain
							class="status-tag" />
						<view v-if="item.isDefault" class="ml-10">
							<u-tag text="默认" type="primary" size="mini" plain
								class="status-tag" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="submit-btn-container">
			<view class="submit-btn">
				<u-button type="primary" shape="circle" @click="createAiVideoClick">
					创建数字人
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	export default {
		data() {
			return {
				page: 0,
				size: 100,
				loadMoreStatus: "loadmore",
				searchLoading: false,
				aiVideoList: []
			}
		},
		onLoad() {
			this.loadAiVideoList();
			uni.$on('deleteAiVideoSuccess', (aiVideoId) => {
				if (aiVideoId) {
					this.aiVideoList = this.aiVideoList.filter(item => item.id !== aiVideoId);
				}
			})
			uni.$on('setDefaultAiVideoSuccess', (aiVideoId) => {
				if (aiVideoId) {
					this.aiVideoList.forEach(aiVideo => {
						aiVideo.isDefault = aiVideo.id == aiVideoId ? true : false;
					})
				}
			})
		},
		methods: {
			loadAiVideoList() {
				let url = "aiVideo/findAiVideoPage?page="
				 + this.page + "&size=" + this.size + "&sort=createTime,desc";
				this.depot.post(api.aiCard(url)).
				then(response => {
					if (response && response.data && response.data.data) {
						if (response.data.data.content && response.data.data.content.length) {
							if (response.data.data.content.length < this.size) {
								this.loadMoreStatus = "nomore"
							} else {
								this.loadMoreStatus = "loadmore"
							}
						} else {
							this.loadMoreStatus = "nomore"
						}
						this.aiVideoList = this.aiVideoList.concat(response.data.data.content);
					}
				}).finally(() => {
					this.searchLoading = false;
				})
			},
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'IN_PROCESS': '处理中',
					'DONE': '已生成',
					'FAIL': '失败'
				}
				return statusMap[status] || '未知'
			},

			// 获取状态标签类型
			getStatusType(status) {
				const typeMap = {
					'IN_PROCESS': 'warning',
					'DONE': 'success',
					'FAIL': 'error'
				}
				return typeMap[status] || 'info'
			},

			// 分页变化
			handlePageChange(page) {
				this.currentPage = page
				this.loadData()
			},

			// 加载数据
			loadData() {
				// 这里应该是API请求
				console.log(`加载第${this.currentPage}页数据`)
			},

			// 点击列表项
			handleItemClick(item) {
				console.log('点击项目:', item)
				uni.navigateTo({
					url: `/pages/detail?id=${item.id}`
				})
			},

			// 提交按钮点击
			handleSubmit() {
				uni.showModal({
					title: '提示',
					content: '确定要提交审核吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							})
						}
					}
				})
			},
			aiVideoCardClick(item) {
				uni.navigateTo({
					url:`/pages/aiPerson/aiPersonDetail?id=${item.id}&videoUrl=${item.videoUrl}`
				})
			},
			createAiVideoClick() {
				uni.navigateTo({
					url:"/pages/aiPerson/createAiPersonStepOne"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	// 定义变量
	@primary-color: #2979ff;
	@success-color: #19be6b;
	@warning-color: #ff9900;
	@error-color: #fa3534;
	@text-color: #606266;
	@border-color: #e4e7ed;
	@bg-color: #f5f7fa;
	@card-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	@border-radius: 8rpx;

	.container {
		padding: 20rpx;
		padding-bottom: 120rpx;
		background-color: @bg-color;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.video-list {
		.video-item {
			display: flex;
			margin-bottom: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: @border-radius;
			box-shadow: @card-shadow;
			min-height: 300rpx;
			.video-cover {
				width: 250rpx;
				height: 250rpx;
				border-radius: @border-radius;
				flex-shrink: 0;
			}

			.content-wrapper {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-width: 0;

				.video-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					.text-ellipsis();
				}

				.video-desc {
					font-size: 24rpx;
					color: @text-color;
					.text-ellipsis-multi(6);
				}

				.status-tag {
					align-self: flex-end;
					margin-top: 10rpx;
				}
			}
		}
	}

	.pagination-wrapper {
		margin: 30rpx 0;
		display: flex;
		justify-content: center;
	}

	.submit-btn-container {
		position: fixed;
		bottom: 0rpx;
		width: calc(100vw - 40rpx);
		height: calc(100rpx + env(safe-area-inset-bottom));
		background-color: @bg-color;
	}
	// .submit-btn {
	// 	left: 20rpx;
	// 	right: 20rpx;
	// 	background-color: @bg-color;
	// 	/deep/ .u-btn {
	// 		height: 80rpx;
	// 	}
	// }

	// 文字省略混合
	.text-ellipsis() {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.text-ellipsis-multi(@lines) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: @lines;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>